<template>
  <div class="hv-form-data-container">
    <a-row>
      <a-col :span="24" class="hv-visual-property-label">组件名称：</a-col>
    </a-row>

    <a-row class="hv-margin-bottom10">
      <a-col :span="24">
        {{ propData && propData.label ? propData.label : "-" }}
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" class="hv-visual-property-label">组件类别：</a-col>
    </a-row>

    <a-row class="hv-margin-bottom10">
      <a-col :span="24">
        {{
          propData && propData.group ? visualComponentGroup[propData.group].label : "-"
        }}
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" class="hv-visual-property-label">组件唯一标识：</a-col>
    </a-row>

    <a-row class="hv-margin-bottom10">
      <a-col :span="24">
        <a-input
          v-if="propData && propData.compId"
          v-model:value="propData.compId"
        />
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" class="hv-visual-property-label">组件位置：</a-col>
    </a-row>

    <a-row class="hv-margin-bottom10">
      <a-col :span="24">
        <hv-visual-property-sub-row>
          <template #leftTitle>X轴(px)： </template>
          <template #leftContent>
            <a-input-number
              v-if="propData && propData.componentPosition"
              v-model:value="propData.componentPosition.left"
              :min="0"
              :max="99999"
              :step="2"
              size="small"
            />
          </template>
          <template #rightTitle>Y轴(px)： </template>
          <template #rightContent>
            <a-input-number
              v-if="propData && propData.componentPosition"
              v-model:value="propData.componentPosition.top"
              :min="0"
              :max="99999"
              :step="2"
              size="small"
            />
          </template>
        </hv-visual-property-sub-row>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" class="hv-visual-property-label">组件尺寸：</a-col>
    </a-row>

    <a-row class="hv-margin-bottom10">
      <a-col :span="24">
        <hv-visual-property-sub-row>
          <template #leftTitle>宽度(px)： </template>
          <template #leftContent>
            <a-input-number
              v-if="propData && propData.componentDimensions"
              v-model:value="propData.componentDimensions.width"
              :min="0"
              :max="99999"
              :step="2"
              size="small"
            />
          </template>
          <template #rightTitle>高度(px)： </template>
          <template #rightContent>
            <a-input-number
              v-if="propData && propData.componentDimensions"
              v-model:value="propData.componentDimensions.height"
              :min="0"
              :max="99999"
              :step="2"
              size="small"
            />
          </template>
        </hv-visual-property-sub-row>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { visualComponentGroup } from "@/visual/configs/dashboard-conifg";
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";
import { defineComponent, type PropType, ref, watch } from "vue";
import VisualPropertySubRow from "./VisualPropertySubRow.vue";

export default defineComponent({
  name: "BasePropsGroup",
  components: {
    hvVisualPropertySubRow: VisualPropertySubRow,
  },
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<any>>,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const propData = ref<DashboardComponentType<any>>();

    watch(
      () => props.compData,
      () => {
        propData.value = props.compData;
      },
      { deep: true, immediate: true }
    );

    return {
      propData,
      visualComponentGroup,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./BasePropsGroup.less";
</style>
